<script lang="ts" setup>
import { BubbleItem } from "@/components";
import ColorPickerDropdown from "@/components/common/ColorPickerDropdown.vue";
import { i18n } from "@/locales";
import type { Editor } from "@/tiptap";
import type { Component } from "vue";

const props = defineProps<{
  editor: Editor;
  isActive: ({ editor }: { editor: Editor }) => boolean;
  visible?: ({ editor }: { editor: Editor }) => boolean;
  icon?: Component;
  title?: string;
  action?: ({ editor }: { editor: Editor }) => void;
}>();

function handleSetColor(color?: string) {
  if (!color) {
    return;
  }
  props.editor?.chain().focus().setColor(color).run();
}

function handleUnsetColor() {
  props.editor?.chain().focus().unsetColor().run();
}
</script>

<template>
  <ColorPickerDropdown @update:model-value="handleSetColor">
    <BubbleItem v-bind="props" />
    <template #prefix>
      <div class="color-option-wrapper">
        <div class="color-option" @click="handleUnsetColor">
          <div class="color-box"></div>
          <span class="color-option-text">
            {{ i18n.global.t("editor.common.button.restore_default") }}
          </span>
        </div>
      </div>
    </template>
  </ColorPickerDropdown>
</template>

<style lang="scss" scoped>
.color-option-wrapper {
  padding: 0.25rem;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;

  &:hover {
    background-color: #f3f4f6;
  }
}

.color-box {
  height: 1.25rem;
  width: 1.25rem;
  cursor: pointer;
  border-radius: 0.125rem;
  background-color: black;
  box-shadow: 0 0 0 1px transparent;
  outline: 1px solid transparent;
  outline-offset: 1px;

  &:hover {
    outline: 1px solid #d1d5db;
  }
}

.color-option-text {
  font-size: 0.75rem;
  color: #4b5563;
}
</style>
